<template>
  <el-card shadow="always" :body-style="{ padding: '0px' }">
    <template #header>
      <div class="project-title">
        <span>{{ project.name }}</span>
      </div>
      <div class="project-count">
        <span>
          <span class="project-label">用例数：</span>
          <span style="margin-right: 10px">{{ project.caseCount }}</span>
        </span>
        <span>
          <span class="project-label">步骤数：</span>
          <span>{{ project.stepCount }}</span>
        </span>
      </div>
      <div>
        <span class="project-desc">{{ project.proDesc }}</span>
      </div>
    </template>
    <div v-if="$route.fullPath.indexOf('project') != -1" class="button-group">
      <el-tooltip content="编辑" placement="top" effect="dark">
        <el-button
          type="primary"
          size="default"
          @click.stop="handleOperation('edit')"
          ><el-icon :size="16"><EditPen /></el-icon
        ></el-button>
      </el-tooltip>
      <el-tooltip content="删除" placement="top" effect="dark">
        <el-button
          type="danger"
          size="default"
          @click.stop="handleOperation('delete')"
          ><el-icon :size="16"><Delete /></el-icon
        ></el-button>
      </el-tooltip>
      <el-tooltip content="运行" placement="top" effect="dark">
        <el-button
          type="success"
          size="default"
          @click.stop="handleOperation('run')"
          ><el-icon :size="20"><VideoPlay /></el-icon
        ></el-button>
      </el-tooltip>
      <el-tooltip content="查看报告" placement="top" effect="dark">
        <el-button
          type="warning"
          size="default"
          @click.stop="handleOperation('result')"
          ><el-icon :size="20"><TrendCharts /></el-icon
        ></el-button>
      </el-tooltip>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import type { SunnyProject } from "@/types/sunnyProject/type";

import {
  EditPen,
  VideoPlay,
  TrendCharts,
  Delete,
} from "@element-plus/icons-vue";

const props = defineProps<{ project: SunnyProject }>();
const emit = defineEmits(["operate"]);

function handleOperation(type: string) {
  emit("operate", type);
}
</script>

<style>
.project-count {
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
  margin-bottom: 10px;
}

.project-title {
  font-size: larger;
  font-weight: bolder;
  margin-bottom: 10px;
}

.project-label {
  font-weight: bold;
  font-size: 15px;
  color: #409eff !important;
}

.project-desc {
  color: #73767a !important;
}
</style>

<style scoped>
.selected {
  background-color: #a0cfff;
}
.el-button {
  padding: 2px 10px;
}

.el-card {
  margin-bottom: 10px;
}

.el-card__header {
  padding: 10px;
}

.button-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
</style>
